<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" :title="title"></uni-navbar></view>

		<view class="tab-nav">
			<view class="nav-item" :class="navItem == 1 ? 'active' : ''">基本信息填写</view>
			<view class="nav-item" :class="navItem == 2 ? 'active' : ''">正文内容填写</view>
		</view>

		<view class="form-box">
			<u-form :model="form" ref="uForm">
				<block v-if="navItem == 1">
					<u-form-item class="form-item" required label="标题" prop="title">
						<u-input v-model="form.title" type="text" placeholder="请输入标题" />
					</u-form-item>
					<u-form-item class="form-item" required label="信息分类" prop="type">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择类别" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="类型明细" prop="secType">
						<u-input v-model="secType" type="select" :select-open="secTypeShow" placeholder="请选择类别" @click="secTypeShow = true" />
						<u-select :list="secTypeList" v-model="secTypeShow" @confirm="secTypeConfirm"></u-select>
					</u-form-item>

					<u-form-item class="form-item" required label="反映身份">
						<u-checkbox-group @change="checkboxGroupChange" class="form-checkbox">
							<u-checkbox v-model="item.checked" v-for="(item, index) in refList" :key="index" :name="item.value">{{ item.label }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<block v-if="$roleCodes('sys_manager') || $roleCodes('yanjiushi') || $roleCodes('fydw')">
						<u-form-item class="form-item" required label="单位类型">
							<u-input v-model="reflectUnitType" type="select" :select-open="refTypeShow" placeholder="请选择单位类型" @click="selectShow('refTypeShow')" />
							<u-select :list="refTypeList" v-model="refTypeShow" @confirm="refTypeConfirm"></u-select>
						</u-form-item>
						<u-form-item class="form-item" required label="反映单位" prop="reflectUnit">
							<u-input v-model="reflectUnit" type="select" :select-open="reflectUnitShow" placeholder="请选择反映单位" @click="selectShow('reflectUnitShow')" />
							<u-select :list="reflectUnitList" v-model="reflectUnitShow" @confirm="reflectUnitConfirm"></u-select>
						</u-form-item>
						<u-form-item class="form-item" label="反映人">
							<u-input v-model="waihotsName" type="select" :select-open="waihotsShow" placeholder="请选择反映人" @click="waihotsShow = true" />
							<select-tree ref="waihotsTree" :show="waihotsShow" :range="waihotsList" :selected="waihotsStr" :multiple="false" :selectParent="false" @confirm="treeConfirm($event, 'waihots')" @cancel="treeCancel($event, 'waihots')"></select-tree>
						</u-form-item>
					</block>
					<u-form-item class="form-item" label="反映人" v-else>
						<u-input disabled v-model="userName" type="text" placeholder="请输入反映人" />
					</u-form-item>
					<u-form-item class="form-item" label="联系方式">
						<u-input v-model="form.identityPhone" type="text" placeholder="请输入联系方式" />
					</u-form-item>
					<u-form-item class="form-item" label="联名人">
						<u-input v-model="lmName" type="select" :select-open="lmShow" placeholder="请选择联名人" @click="lmShow = true" />
						<select-tree ref="lmTree" :show="lmShow" :range="lmList" :selected="lmStr" @confirm="treeConfirm($event, 'lm')" @cancel="treeCancel($event, 'lm')"></select-tree>
					</u-form-item>
					<u-form-item class="form-item" required label="签发" prop="issue">
						<u-input v-model="form.issue" type="text" placeholder="请输入签发" />
					</u-form-item>
					<u-form-item class="form-item" required label="编辑" prop="edit">
						<u-input v-model="form.edit" type="text" placeholder="请输入编辑" />
					</u-form-item>
				</block>
				<block v-else>
					<u-form-item class="form-item" required label="正文内容" prop="content">
						<u-input v-model="form.content" type="textarea" placeholder="请输入正文内容" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>

					<view class="ocr-box">
						<view class="ocr" @click="ocrTo('image', 'content')">
							<image src="/static/img/icon_90.png" mode="widthFix"></image>
							<view>图片识别</view>
						</view>
						<view class="ocr" @click="ocrTo('audio', 'content')">
							<image src="/static/img/icon_91.png" mode="widthFix"></image>
							<view>文字识别</view>
						</view>
					</view>

					<u-form-item class="form-item" label="提交日期"><u-input v-model="timer" type="text" placeholder="提交日期" /></u-form-item>

					<u-form-item class="form-item" label="上传文件"><uni-file-upload style="width: 500rpx"></uni-file-upload></u-form-item>
				</block>
			</u-form>
		</view>

		<view class="fiexd-btm">
			<u-button class="form-btn" v-if="navItem == 1" type="error" @click="confirm">下一步</u-button>
			<view v-else :class="$sysMenus('sqmy_draft') ? 'flex-box' : ''">
				<u-button class="form-btn" type="error" @click="confirm">提交</u-button>
				<u-button class="form-btn" type="success" @click="spare" v-if="$sysMenus('sqmy_draft')">草稿</u-button>
			</view>
		</view>

		<view v-if="false && sqmyClue"></view>
	</view>
</template>

<script>
import uniFileUpload from '@/components/uni-file-uploader.vue';
import dateTimePicker from '@/components/uni-datetime-picker';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniFileUpload,
		dateTimePicker,
		selectTree
	},
	data() {
		return {
			id: '',
			title: '提交社情民意',
			typeA: '',
			userName: '',
			navItem: 1,
			ocrKey: '',
			disabled: false,

			timer: '',
			reflectUserIdentity: '',
			refShow: false,
			refList: [],

			reflectUnitType: '',
			refTypeShow: false,
			refTypeList: [],

			reflectUnit: '',
			reflectUnitShow: false,
			reflectUnitList: [],

			type: '',
			typeShow: false,
			typeList: [],

			secType: '',
			secTypeShow: false,
			secTypeList: [],

			waihotsIds: [],
			waihotsName: '',
			waihotsShow: false,
			waihotsList: [],
			waihotsStr: '',

			lmIds: [],
			lmName: '',
			lmShow: false,
			lmList: [],
			lmStr: '',

			teamType: '1',
			dictType: '',
			form: {
				id: '',
				title: '',
				type: '',
				secType: '',
				sqmyClueId: '',
				nodeStatus: '1',
				reflectUserIdentity: '',
				reflectUser: '',
				reflectUnit: '',
				reflectUnitType: '',
				waihots: '',
				issue: '',
				identityPhone: '',
				edit: '',
				content: ''
			},
			rules: {
				title: [
					{
						required: true,
						message: '请输入标题',
						trigger: 'change'
					}
				],
				type: [
					{
						required: true,
						message: '请选择信息分类',
						trigger: 'change'
					}
				],
				secType: [
					{
						required: true,
						message: '请选择类别明细',
						trigger: 'change'
					}
				],
				reflectUserIdentity: [
					{
						required: true,
						message: '请选择反映人身份',
						trigger: 'change'
					}
				],
				issue: [
					{
						required: true,
						message: '请输入签发',
						trigger: 'change'
					}
				],
				edit: [
					{
						required: true,
						message: '请输入编辑',
						trigger: 'change'
					}
				],
				reflectUnit: [
					{
						required: true,
						message: '请选择反映单位',
						trigger: 'change'
					}
				],
				content: [
					{
						required: true,
						message: '请输入正文内容',
						trigger: 'change'
					}
				]
			},
			sqmyClue: {
				adoptUser: '',
				clientCode: ''
			}
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.loadDict('sqmy_category', 'typeList');
		this.loadTeam('weiyuan, changwei, teyaoxinxiyuan');
		this.loadDict('reflect_unit_type', 'refTypeList');
		this.loadDict('sqmy_reflect_identity', 'refList');
		if (option && option.id) {
			this.id = option.id;
			if (option.type == 'clue') {
				this.typeA = 'clue';
				this.form.sqmyClueId = option.id;
				this.clueData();
			} else if (option.type == 'spare') {
				this.title = '修改社情民意';
				this.typeA = 'spare';
				this.spareData();
			}
		}

		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			let time = this.$writeCurrentDate();
			if (this.userInfo.Authorization) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.timer = time.year + '年' + time.month + '月' + time.date + '日';
				this.userName = this.userInfo.sysUser.userName;
				this.form.reflectUser = this.userInfo.sysUser.id;
				this.form.waihots = this.userInfo.sysUser.id;
				this.form.submitDate = time.year + '-' + time.month + '-' + time.date;
				this.form.identityPhone = this.userInfo.sysUser.phone;
				this.sqmyClue.adoptUser = this.userInfo.sysUser.id;
				this.sqmyClue.clientCode = this.userInfo.sysUser.clientCode;
			} else {
				this.$logout();
			}
		},
		selectShow(e) {
			if (this.disabled) {
				return false;
			}
			this[e] = true;
		},
		treeConfirm(e, type) {
			if (!e || e.length == 0) {
				this[type + 'Show'] = false;
				this[type + 'Name'] = '';
				this[type + 'Ids'] = [];
				return false;
			}
			if (type == 'waihots') {
				this[type + 'Ids'] = e[0].id;
				this[type + 'Name'] = e[0].name;
				this[type + 'Show'] = false;

				this.form.waihots = this.waihotsIds;
				if (this.$roleCodes('fydw')) {
					this.form.reflectUser = this.waihotsIds;
				}
			} else {
				this[type + 'Ids'] = [];
				let names = [];
				let i = 0;
				if (e.length > 0) {
					e.forEach((item) => {
						this[type + 'Ids'].push(item.id);
						if (i < 3) {
							names.push(item.name);
							i++;
						}
					});
					this[type + 'Name'] = names.join(',') + '等' + e.length + '人';
				}
				this[type + 'Show'] = false;
			}
		},
		treeCancel(e, type) {
			this[type + 'Show'] = false;
		},
		checkboxGroupChange(e) {
			this.reflectUserIdentity = e;
			this.form.reflectUserIdentity = e.join(',');
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
			this.loadDict(e[0].value, 'secTypeList');
			this.secType = '';
			this.form.secType = null;
		},
		secTypeConfirm(e) {
			this.secType = e[0].label;
			this.form.secType = e[0].value;
		},
		reflectUnitConfirm(e) {
			this.reflectUnit = e[0].label;
			this.form.reflectUnit = e[0].value;
		},
		refTypeConfirm(e) {
			this.reflectUnitType = e[0].label;
			this.form.reflectUnitType = e[0].value;
			this.reflectUnit = '';
			this.form.reflectUnit = null;
			this.loadDict('reflect_unit_type_' + e[0].value, 'reflectUnitList');
		},
		refConfirm(e) {
			console.log(this.form.reflectUserIdentity);
			this.reflectUserIdentity = e[0].label;
			this.form.reflectUserIdentity = e[0].value;
		},
		loadDict(type, list, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						checked: false,
						value: item.dictValue,
						label: item.dictName
					});
					if (value && value == item.dictValue) {
						this.secType = item.dictName;
					}
					let unit2 = this.userInfo.sysUser.remark1;
					let unit1 = unit2 && unit2.split('_')[0];
					if (type == 'reflect_unit_type' && unit2) {
						if (unit1 == item.dictValue) {
							this.reflectUnitType = item.dictName;
							this.form.reflectUnitType = item.dictValue;
							this.loadDict('reflect_unit_type_' + item.dictValue, 'reflectUnitList');
						}
					}
					if (type.indexOf('reflect_unit_type_') != -1 && unit2) {
						if (unit2 == item.dictValue) {
							this.disabled = true;
							this.reflectUnit = item.dictName;
							this.form.reflectUnit = item.dictValue;
						}
					}
				});
			});
		},
		clueData() {
			this.$request('/sheqingminyi/sqmy-clue/detail', {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				this.$store.commit('filePush', res.data.fileList);
				this.form.title = res.data.sqmyClue.title;
				let regx = /<[^>]*>|<\/[^>]*>/gm;
				if (res.data.sqmyClue.content) {
					this.form.content = res.data.sqmyClue.content.replace(regx, '');
				}
				if (res.data.sqmyClue.contact) {
					this.form.identityPhone = res.data.sqmyClue.contact;
				}
			});
		},
		spareData() {
			this.$request('/sheqingminyi/sqmy/detail', {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				let time = this.$writeCurrentDate();
				// Object.assign(this.form, res.data.sqmy);
				Object.keys(this.form).forEach((key) => (this.form[key] = res.data.sqmy[key]));
				this.$store.commit('filePush', res.data.fileList);
				this.reflectUserIdentity = res.data.sqmy.reflectUserIdentity;
				this.waihotsStr = res.data.sysUser.id;
				this.waihotsName = res.data.sysUser.userName;
				this.form.reflectUser = res.data.sysUser.id;
				this.form.reflectUserIdentity = res.data.sqmy.reflectUserIdentity;
				this.timer = time.year + '年' + time.month + '月' + time.date + '日';
				this.form.submitDate = time.year + '-' + time.month + '-' + time.date;
				this.form.nodeStatus = '1';

				let regx = /<[^>]*>|<\/[^>]*>/gm;
				if (res.data.sqmy.content) {
					this.form.content = res.data.sqmy.content.replace(regx, '');
				}

				if (res.data.sqmyJointCelebrities) {
					this.lmIds = [];
					let names = [];
					let i = 0;
					res.data.sqmyJointCelebrities.forEach((item) => {
						this.lmIds.push(item.jointCelebritiesId);
						if (i < 2) {
							names.push(item.jointCelebritiesName);
							i++;
						}
					});
					if (i > 0) {
						this.lmStr = this.lmIds.join(',');
						this.lmName = names.join(',') + '等' + this.lmIds.length + '人';
					}
				}

				this.typeList.forEach((item) => {
					if (res.data.sqmy.type == item.value) {
						this.type = item.label;
						this.loadDict(item.value, 'secTypeList', res.data.sqmy.secType);
					}
				});

				this.refList.forEach((item) => {
					let arr = this.form.reflectUserIdentity.split(',');
					arr.forEach((key) => {
						if (key == item.value) {
							item.checked = true;
						}
					});
				});

				let unit2 = res.data.sqmy.reflectUnit;
				let unit1 = unit2 && unit2.split('_')[0];
				this.refTypeList.forEach((item) => {
					if (unit1 == item.value) {
						this.reflectUnitType = item.label;
						this.form.reflectUnitType = item.value;
					}
				});

				this.reflectUnitList.forEach((item) => {
					if (unit2 == item.value) {
						this.reflectUnit = item.label;
						this.form.reflectUnit = item.value;
					}
				});
			});
		},
		loadTeam(type) {
			this.$request('/system/sys-user/team_users', {
				clientCode: this.clientCode,
				currentUserId: this.userId,
				dictType: 'jiebie',
				roleCodes: type,
				teamType: '2',
				withCw: '1'
			}).then((res) => {
				if (res.data) {
					this.waihotsList = res.data;
					this.lmList = res.data;
				}
			});
		},
		loadJoint() {
			this.$request('/sheqingminyi/sqmy/jointCommitteeList', {
				clientCode: this.clientCode,
				remark1: '3',
				roleCode: this.userInfo.roleCodes.join(',')
			}).then((res) => {
				if (res.data) {
					this.lmList = res.data;
				}
			});
		},
		onEditorReady(edit) {
			this.$refs.editor
				.context((res) => {
					this[edit] = res.context;
				})
				.exec();
		},
		spare() {
			this.form.nodeStatus = '0';
			this.confirm();
		},
		ocr(key) {
			this.ocrKey = key;
		},
		ocrTo(e, key) {
			this.ocrKey = key;
			uni.navigateTo({
				url: '/pagesB/ocr/index?ocrKey=' + this.ocrKey + '&type=' + e
			});
		},
		confirm() {
			if (this.navItem == 1) {
				this.$refs.uForm.validate((valid) => {
					if (!valid) {
						console.log('验证失败');
						return false;
					} else if (!this.form.reflectUserIdentity) {
						this.$msg('请选择反映人身份');
						return false;
					} else {
						this.navItem = 2;
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
					}
				});
			} else {
				this.$refs.uForm.validate((valid) => {
					if (!valid) {
						console.log('验证失败');
						return false;
					} else {
						let data = {};
						this.form.clientCode = this.clientCode;
						this.form.createBy = this.userId;

						if (this.$roleCodes('weiyuan')) {
							this.form.reportIdentity = '1';
						} else if (this.$roleCodes('dangpai')) {
							this.form.reportIdentity = '2';
						} else if (this.$roleCodes('zhuanweihui')) {
							this.form.reportIdentity = '3';
						} else if (this.$roleCodes('tuanti')) {
							this.form.reportIdentity = '4';
						} else {
							this.form.reportIdentity = '5';
						}

						data = {
							sqmy: this.form,
							jointlyers: this.lmIds.join(','),
							flie: this.fileList
						};

						let url = '/sheqingminyi/sqmy/add';
						if (this.form.sqmyClueId) url = '/sheqingminyi/sqmy-clue/use';
						this.$request(url, data, {
							load: true
						}).then((res) => {
							this.$msg(res.msg);
							setTimeout(() => {
								let pre = this.$prePage();
								if (pre && pre.loadData) {
									pre.loadData('refresh');
								}
								if (pre && pre.loadAll) {
									pre.loadAll();
								}
								uni.navigateBack();
							}, 500);
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;
	}

	.form-checkbox {
		// padding: 8rpx 0;
		margin: -8rpx 0;
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
